<template>
	<div
		class="goods-item"
		:class="[
			{
				'is-disabled': item.receiveStatus > 0
			}
		]"
	>
		<!-- 排名 -->
		<div class="goods-item__rank">
			<template v-if="index < 3">
				<img :src="`https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/images/million_good_top${index + 1}.png`" />
			</template>
			<div class="goods-item__rank-index" v-else-if="index > 2 && index < 10 && tabIndex == 0">
				<span>{{ index + 1 }}</span>
			</div>
		</div>

		<!-- 封面 -->
		<div class="goods-item__cover">
			<img class="goods-item__cover-pic" mode="aspectFit" :src="item.pic" lazy-load />
			<img v-if="item.quanMLink > 0" class="goods-item__cover-tag" src="@/assets/2/images/pre-sale-tag.png" />
		</div>

		<!-- 详情 -->
		<div class="goods-item__detail">
			<div class="goods-item__title">
				<span class="goods-item__title-tag">唯品会</span>
				{{ item.title }}
			</div>

			<span class="goods-item__lave">已抢{{ item.receiveVirtualNum || 0 }}件</span>

			<div class="flex1"></div>

			<div class="goods-item__newcomer-price">
				补贴价
				<span class="goods-item__newcomer-price--now">{{ item.price }}</span>
				<span class="goods-item__newcomer-price--original">{{ item.price || 0 }}</span>
			</div>

			<div class="goods-item__footer">
				<div class="goods-item__coupon">
					<img mode="widthFix" src="@/assets/2/images/coupon-bg.png" />
					<span>{{ item.couponMoney || 0 }}元</span>
				</div>

				<div class="goods-item__grab">
					<img mode="widthFix" src="@/assets/2/images/grab-disabled-bg.png" v-if="item.receiveStatus > 0" />
					<img mode="widthFix" src="@/assets/2/images/grab-bg.png" v-else />

					<div class="goods-item__grab-price">
						<span>{{ item.allowanceMoney || 0 }}元</span>
						<span>补贴金</span>
					</div>

					<div class="goods-item__grab-btn" @click="toHref">
						<span>立即抢</span>
					</div>
				</div>
			</div>

			<!-- 已使用 -->
			<div class="goods-item__state--used" v-if="item.hasBuy == 1">
				<img src="@/assets/2/images/state-used.png" />
			</div>

			<!-- 已抢完 -->
			<div class="goods-item__state--finished" v-if="item.receiveStatus > 0">
				<span>已抢完</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		item: Object,
		index: Number,
		tabIndex: Number
	},

	filters: {
		now_price({ endPrice, mdMoney, tljMoney, hzQuanOver }) {
			return (parseFloat(endPrice || 0) - parseFloat(mdMoney || 0) - parseFloat(tljMoney || 0) - parseFloat(hzQuanOver || 0)).toFixed(2);
		}
	},

	methods: {
		toHref() {
			location.href = this.item.link;
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
